<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
	
	<h:head>
        <title>Bank of Quebec</title>
    </h:head>
    <h:body>
	    <h:outputStylesheet library="css" name="inputStyle.css" />
	    	<f:event type="preRenderView" listener="#{productManagedBean.updateProductsList}" />
	    	<p:layout fullPage="true">
	            <p:layoutUnit position="north" size="268" resizable="false" closable="false" collapsible="false">
	            	<div id="container" style="width:1145px">
		 				<div>
		 					<h:graphicImage library="images" name="main_buttons.png" />
		 					<h:form>
		 						<h:commandButton action="checkings_savings_account_description"  image="/resources/images/checkings_savings_button.png" style="position: absolute; left: 50px; top: 220px;"/>
		 						<h:commandButton action="credit_card_description"  image="/resources/images/credit_card_button.png" style="position: absolute; left: 400px; top: 218px;"/>
		 						<h:commandButton action="investment_account_opening"  image="/resources/images/investing_button.png" style="position: absolute; left: 700px; top: 218px;"/>
		 					</h:form>
		 				</div>
		 			</div>
	            </p:layoutUnit>
	            <p:layoutUnit position="west" size="200" resizable="false" closable="false" collapsible="false">
	            	<ui:include src="client_options.xhtml" />
	            </p:layoutUnit>
	            <p:layoutUnit position="center">
	            	<div id="container_main" style="width:700px">
	            		<p class="title_boq">MUTUAL FUNDS</p><br /><br />
	            		<h:form>
		            		<b>Account</b>&nbsp;&nbsp;<h:outputText value="#{mutualFundsManagedBean.productManagedBean.selectedProduct.accountNumber}" /><br/>
            				<b>Available Balance</b>&nbsp;&nbsp; $<h:outputText value="#{mutualFundsManagedBean.productManagedBean.selectedProduct.balance}" /><br/>
            				<b>Annual Interest Rate</b>&nbsp;&nbsp; $<h:outputText value="#{mutualFundsManagedBean.productManagedBean.selectedProduct.annualInterestRate}" /><br/>
            				<b>Last Month Interests</b>&nbsp;&nbsp; $<h:outputText value="#{mutualFundsManagedBean.productManagedBean.selectedProduct.balance}" /><br/>
            				<b>Avg Interest Rate</b>&nbsp;&nbsp;<h:outputText value="#{mutualFundsManagedBean.productManagedBean.selectedProduct.balance}" />%<br/>
		            		<center>
			            		<h:form>
					                <ui:insert name="content">
					                	<br />
					                	<h:dataTable value="#{mutualFundsManagedBean.listLastMovements()}" var="transaction"
					                		styleClass="order-table"
			    							headerClass="order-table-header"
			    							rowClasses="order-table-odd-row,order-table-even-row"
			    							columnClasses="column1,column2,column3"
			    						>
					                		<h:column>
			    								<!-- column header -->
			    								<f:facet name="header">Date</f:facet>
			    								<!-- row record -->
			    								#{transaction.date}
			    							</h:column>
			    							<h:column>
			    								<!-- column header -->
			    								<f:facet name="header">Operation</f:facet>
			    								<!-- row record -->
			    								#{transaction.transactionType}
			    							</h:column>
			    							<h:column>
			    								<!-- column header -->
			    								<f:facet name="header">Amount</f:facet>
			    								<!-- row record -->
			    								#{transaction.amount}
			    							</h:column>
										</h:dataTable>
					                </ui:insert>
			                	</h:form>
			                </center>
	                	</h:form>
	           		</div>
	            </p:layoutUnit>
	        </p:layout> 
    </h:body>
</html>